<template>
    <view class="mine">
        <view class="top">
			<image :src="this.$store.state.userInfo.avatar" @tap="showPic($store.state.userInfo.avatar)">
				<text :class="isSocketOpen?'online':'offline'"></text>
			</image>
            <view class="name">{{nickname}}</view>
        </view>
		<view class="middle">
			<view class="row">
				<text class="title">D id</text>
				<text class="content">{{user.loginId}}</text>
			</view>
			<view class="row">
				<text class="title">性别</text>
				<text class="content">{{user.gender==''?'未知':user.gender}}</text>
			</view>
			<view class="row">
				<text class="title">个性签名</text>
				<text class="content">{{user.signature}}</text>
			</view>
			<view class="row">
				<text class="title">注册时间</text>
				<text class="content">{{user.register_time}}</text>
			</view>
		</view>
        <view class="bottom">
            <view class="logout" @tap="toInfoPage()">设置</view>
        </view>
    </view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex';
    export default {
        data () {
            return {
            
            }
        },
		//通过计算属性可以读取并实时监听状态的变化
		computed: {
		   ...mapGetters(['avatar','nickname','user','isSocketOpen']),
		},
        methods : {
			// 预览图片
			showPic(url) {
				uni.previewImage({
					indicator: 'none',
					current:url,
					urls:[url]
				});
			},
          toInfoPage(){
			  uni.navigateTo({
			  	url:'info',
				animationType: 'slide-in-right',
				success: res => {},
				fail: () => {},
				complete: () => {}
			  })
		  }    
            
        }
    }
</script>

<style>
	.online{
		display: block;
		width: 30rpx; height: 30rpx;
		background-color: #00ff00; color: white;
		font-size:medium;
		text-align: center; line-height: 40rpx;
		border-radius: 50%;
		position: relative;
		top: -40rpx;
		right: -60rpx;
	}
	.offline{
		display: block;
		width: 30rpx; height: 30rpx;
		background-color: #ff0000; color: white;
		font-size:medium;
		text-align: center; line-height: 40rpx;
		border-radius: 50%;
		position: relative;
		top: -40rpx;
		right: -60rpx;
	}
	.row{
		display: flex;
	}
	.middle{
		padding: 20rpx;
	}
	.title{
		font-weight: 600;
		border-radius: 10rpx;
		padding: 5rpx;
		background-color: #c2b5be;
		margin: 10rpx;
	}
	.content{
		font-weight: 500;
		margin-top: 10rpx;
		margin-left: 20rpx;
		word-break:break-all;
	}
    .mine{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .top{
        height: 400rpx;
        background: #C8C7CC;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .top image{
        width:156rpx;
        height: 156rpx;
        border-radius: 156rpx;
    }
    .top .name{
		font-weight: 1000;
		font-size: larger;
        line-height: 80rpx;
    }
    .bottom{
		padding-top: 100rpx;
        text-align: center;
        line-height: 200rpx;
    }
	.logout{
		width: 266rpx;
		height: 76rpx;
		line-height: 76rpx;
		margin: 0 auto;
		background-color: #618DFF;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
</style>
